<script lang="ts">
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	const code1 = `<script lang="ts">
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
<\/script>
<div class="example">
    <div class="example-group">
	    <RectButton icon="interface/palette" label="info" variant="info" type="text"></RectButton>
	    <RectButton icon="interface/palette" label="primary" variant="primary" type="text"></RectButton>
	    <RectButton icon="interface/palette" label="secondary" variant="secondary" type="text"></RectButton>
	    <RectButton icon="interface/palette" label="success" variant="success" type="text"></RectButton>
	    <RectButton icon="interface/palette" label="warning" variant="warning" type="text"></RectButton>
	    <RectButton icon="interface/palette" label="error" variant="error" type="text"></RectButton>
    </div>
    <div class="example-group">
	    <RectButton icon="interface/palette" label="info" variant="info" type="link"></RectButton>
	    <RectButton icon="interface/palette" label="primary" variant="primary" type="link"></RectButton>
	    <RectButton icon="interface/palette" label="secondary" variant="secondary" type="link"></RectButton>
	    <RectButton icon="interface/palette" label="success" variant="success" type="link"></RectButton>
	    <RectButton icon="interface/palette" label="warning" variant="warning" type="link"></RectButton>
	    <RectButton icon="interface/palette" label="error" variant="error" type="link"></RectButton>
    </div>
    <div class="example-group">
        <RectButton icon="interface/palette" label="info" variant="info" type="ghost"></RectButton>
        <RectButton icon="interface/palette" label="primary" variant="primary" type="ghost"></RectButton>
        <RectButton icon="interface/palette" label="secondary" variant="secondary" type="ghost"></RectButton>
        <RectButton icon="interface/palette" label="success" variant="success" type="ghost"></RectButton>
        <RectButton icon="interface/palette" label="warning" variant="warning" type="ghost"></RectButton>
        <RectButton icon="interface/palette" label="error" variant="error" type="ghost"></RectButton>
    </div>
    <div class="example-group">
        <RectButton icon="interface/palette" label="info" variant="info" type="paint"></RectButton>
        <RectButton icon="interface/palette" label="primary" variant="primary" type="paint"></RectButton>
        <RectButton icon="interface/palette" label="secondary" variant="secondary" type="paint"></RectButton>
        <RectButton icon="interface/palette" label="success" variant="success" type="paint"></RectButton>
        <RectButton icon="interface/palette" label="warning" variant="warning" type="paint"></RectButton>
        <RectButton icon="interface/palette" label="error" variant="error" type="paint"></RectButton>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="filled"></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="filled"></RectButton>
		<RectButton icon="interface/palette" label="secondary" variant="secondary" type="filled"></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="filled"></RectButton>
		<RectButton icon="interface/palette" label="warning" variant="warning" type="filled"></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="filled"></RectButton>
	</div>
</div>`.trim();
const code2 = `<script lang="ts">
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
<\/script>
<div class="example">
	<div class="example-group">
		<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="ghost" size="lg"></RectButton>
		<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="paint" size="lg"></RectButton>
		<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="filled" size="lg"></RectButton>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="ghost" size="md"></RectButton>
		<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="paint" size="md"></RectButton>
		<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="filled" size="md"></RectButton>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="ghost" size="sm"></RectButton>
		<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="paint" size="sm"></RectButton>
		<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="filled" size="sm"></RectButton>
	</div>
</div>`.trim();
const code3 = `<script lang="ts">
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
<\/script>
<div class="example">
	<div class="category">
		<span class="keyword">text 按钮</span>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="text" disabled></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="text" disabled></RectButton>
		<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="text" disabled></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="text" disabled></RectButton>
		<RectButton icon="interface/palette" label="warning" variant="warning" type="text" disabled></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="text" disabled></RectButton>
	</div>
	<div class="category">
		<span class="keyword">link 按钮</span>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="link" disabled></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="link" disabled></RectButton>
		<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="link" disabled></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="link" disabled></RectButton>
		<RectButton icon="interface/palette" label="warning" variant="warning" type="link" disabled></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="link" disabled></RectButton>
	</div>
	<div class="category">
		<span class="keyword">ghost 按钮</span>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="ghost" disabled></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="ghost" disabled></RectButton>
		<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="ghost" disabled></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="ghost" disabled></RectButton>
		<RectButton icon="interface/palette" label="warning" variant="warning" type="ghost" disabled></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="ghost" disabled></RectButton>
	</div>
	<div class="category">
		<span class="keyword">paint 按钮</span>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="paint" disabled></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="paint" disabled></RectButton>
		<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="paint" disabled></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="paint" disabled></RectButton>
		<RectButton icon="interface/palette" label="warning" variant="warning" type="paint" disabled></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="paint" disabled></RectButton>
	</div>
	<div class="category">
		<span class="keyword">filled 按钮</span>
	</div>
	<div class="example-group">
		<RectButton icon="interface/palette" label="info" variant="info" type="filled" disabled></RectButton>
		<RectButton icon="interface/palette" label="primary" variant="primary" type="filled" disabled></RectButton>
		<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="filled" disabled></RectButton>
		<RectButton icon="interface/palette" label="success" variant="success" type="filled" disabled></RectButton>
		<RectButton	icon="interface/palette" label="warning" variant="warning" type="filled" disabled></RectButton>
		<RectButton icon="interface/palette" label="error" variant="error" type="filled" disabled></RectButton>
	</div>
</div>`.trim();
	// 1.属性数据
	const attributesData = [
		{ id: 1, name: 'size', describe: '尺寸', type: ['sm', 'md', 'lg'], defaulValue: 'md' },
		{
			id: 2,
			name: 'type',
			describe: '按钮类型',
			type: ['text', 'link', 'ghost', 'paint', 'filled'],
			defaulValue: 'filled'
		},
		{
			id: 3,
			name: 'variant',
			describe: '按钮颜色，与主题色保持一致',
			type: ['info', 'primary', 'secondary', 'success', 'warning', 'error'],
			defaulValue: 'info'
		},
		{ id: 4, name: 'label', describe: '显示文字', type: 'string', defaulValue: '' },
		{ id: 5, name: 'labelSize', describe: '文字的大小', type: 'number', defaulValue: '' },
		{
			id: 6,
			name: 'icon',
			describe: '图标路径，例如 interface/palette',
			type: 'string',
			defaulValue: ''
		},
		{ id: 7, name: 'iconSize', describe: '图标的大小', type: 'number', defaulValue: '' },
		{ id: 8, name: 'iconColor', describe: '图标颜色', type: 'string', defaulValue: '' },
		{ id: 9, name: 'disabled', describe: '是否禁用', type: 'boolean', defaulValue: 'false' },
		{
			id: 10,
			name: 'style',
			describe: '行内样式',
			type: 'string | Partial<CSSStyleDeclaration> | null',
			defaulValue: ''
		}
	];
	const eventsData = [
		{ id: 1, name: 'onClick', describe: '点击事件', type: '(e: MouseEvent) => void' }
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Button 按钮</div>
		<div class="describe">常用的操作按钮，主要有矩形按钮和圆形按钮。</div>
	</div>
	<div class="compType">#RectButton 矩形按钮</div>
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;type&nbsp;</span>值
			<span class="tag">text</span>、
			<span class="tag">link</span>、
			<span class="tag">ghost</span>、
			<span class="tag">paint</span>、
			<span class="tag">filled</span>
			<span>来定义样式。</span>
		</div>
	</div>
	<ComponentPreview code={code1}>
		<div class="example">
			<div class="category">
				<span class="keyword">text 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="text"></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="text"
				></RectButton>
				<RectButton icon="interface/palette" label="secondary" variant="secondary" type="text"
				></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="text"
				></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="text"
				></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="text"></RectButton>
			</div>
			<div class="category">
				<span class="keyword">link 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="link"></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="link"
				></RectButton>
				<RectButton icon="interface/palette" label="secondary" variant="secondary" type="link"
				></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="link"
				></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="link"
				></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="link"></RectButton>
			</div>
			<div class="category">
				<span class="keyword">ghost 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="ghost"></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="ghost"
				></RectButton>
				<RectButton icon="interface/palette" label="secondary" variant="secondary" type="ghost"
				></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="ghost"
				></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="ghost"
				></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="ghost"
				></RectButton>
			</div>
			<div class="category">
				<span class="keyword">paint 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="paint"></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="paint"
				></RectButton>
				<RectButton icon="interface/palette" label="secondary" variant="secondary" type="paint"
				></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="paint"
				></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="paint"
				></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="paint"
				></RectButton>
			</div>
			<div class="category">
				<span class="keyword">filled 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="filled"></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="filled"
				></RectButton>
				<RectButton icon="interface/palette" label="secondary" variant="secondary" type="filled"
				></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="filled"
				></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="filled"
				></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="filled"
				></RectButton>
			</div>
		</div>
	</ComponentPreview>
	<div class="subtitle">
		<div class="name">组件大小</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;size&nbsp;</span>值
			<span class="tag">sm</span>、
			<span class="tag">md</span>、
			<span class="tag">lg</span>&nbsp;&nbsp;来控制组件大小。
		</div>
	</div>
	<ComponentPreview code={code2}>
		<div class="example">
			<div class="example-group">
				<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="ghost" size="lg"></RectButton>
				<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="paint" size="lg"></RectButton>
				<RectButton icon="interface/palette" label="大尺寸" variant="primary" type="filled" size="lg"></RectButton>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="ghost" size="md"></RectButton>
				<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="paint" size="md"></RectButton>
				<RectButton icon="interface/palette" label="中尺寸" variant="primary" type="filled" size="md"></RectButton>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="ghost" size="sm"></RectButton>
				<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="paint" size="sm"></RectButton>
				<RectButton icon="interface/palette" label="小尺寸" variant="primary" type="filled" size="sm"></RectButton>
			</div>
		</div>
	</ComponentPreview>
	<div class="subtitle">
		<div class="name">禁用状态</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;disabled&nbsp;</span>属性来控制。
		</div>
	</div>
	<ComponentPreview code={code3}>
		<div class="example">
			<div class="category">
				<span class="keyword">text 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="text" disabled></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="text" disabled></RectButton>
				<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="text" disabled></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="text" disabled></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="text" disabled></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="text" disabled></RectButton>
			</div>
			<div class="category">
				<span class="keyword">link 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="link" disabled></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="link" disabled></RectButton>
				<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="link" disabled></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="link" disabled></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="link" disabled></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="link" disabled></RectButton>
			</div>
			<div class="category">
				<span class="keyword">ghost 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="ghost" disabled></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="ghost" disabled></RectButton>
				<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="ghost" disabled></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="ghost" disabled></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="ghost" disabled></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="ghost" disabled></RectButton>
			</div>
			<div class="category">
				<span class="keyword">paint 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="paint" disabled></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="paint" disabled></RectButton>
				<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="paint" disabled></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="paint" disabled></RectButton>
				<RectButton icon="interface/palette" label="warning" variant="warning" type="paint" disabled></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="paint" disabled></RectButton>
			</div>
			<div class="category">
				<span class="keyword">filled 按钮</span>
			</div>
			<div class="example-group">
				<RectButton icon="interface/palette" label="info" variant="info" type="filled" disabled></RectButton>
				<RectButton icon="interface/palette" label="primary" variant="primary" type="filled" disabled></RectButton>
				<RectButton	icon="interface/palette" label="secondary" variant="secondary" type="filled" disabled></RectButton>
				<RectButton icon="interface/palette" label="success" variant="success" type="filled" disabled></RectButton>
				<RectButton	icon="interface/palette" label="warning" variant="warning" type="filled" disabled></RectButton>
				<RectButton icon="interface/palette" label="error" variant="error" type="filled" disabled></RectButton>
			</div>
		</div>
	</ComponentPreview>
	<div class="subtitle">
		<div class="name">RectButton Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
	<div class="subtitle">
		<div class="name">RectButton Events</div>
	</div>
	<Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>
